<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用复合排序</title>
</head>
<body>

<BODY>
<script language="JavaScript">
<!--
	
	//父页面
	var targetWindow = (window.dialogArguments)?window.dialogArguments:window.opener;
	//父页面的相关变量
	var tableObj = targetWindow.${param.tableId};
	//初始化排序的字段和数据
	var display = tableObj.orderDisplays;
	var key = tableObj.orderKeys;
	var sort = tableObj.orderSorts;
	
	
	//函数
	function init() {
		var orderlist = document.getElementById("orderlist");
		var d = display;
		var k = key;
		var s = sort;
		for (i = 0;i < d.length; i ++) {
			eval("var oDiv = document.getElementById(\"" + k[i] + "_div\");");
			if (s[i] != "" && s[i] != "NONE" && s[i] != "none") {
				var oOption = document.createElement("OPTION");
				
				if (s[i] == "desc" || s[i] == "DESC")
					oOption.text = d[i] + "      (降序)";
				else
					oOption.text = d[i] + "      (升序)";
				oOption.value = k[i] + ":" + s[i];
				orderlist.options[orderlist.length] = oOption;
				oDiv.style.display = "none";
			} else {
				oDiv.style.display = "block";
				var inputTd = oDiv.children[0].children[0].children[0].children[1];
				inputTd.children[0].checked = false;
				inputTd.children[1].checked = false;
				inputTd.children[2].checked = true;
			}
		}
	}
	
	function groupUp() {
		var eachO;
		var orderlist = document.getElementById("orderlist");
	    for (i = 0; i < orderlist.length; i++) {
	        eachO = orderlist.options[i];
			if (eachO.selected) {
			    up(i);
			}
	    }
	}

	function groupDown() {
		var orderlist = document.getElementById("orderlist");
		var eachO;
	    for (i = orderlist.length - 1; i >= 0; i--) {
	        eachO = orderlist.options[i];
			if (eachO.selected) {
			    down(i);
			}
	    }
	}

	function groupRemove() {
		var orderlist = document.getElementById("orderlist");
	    var eachO;
	    for (i = orderlist.length - 1; i >= 0; i--) {
	        eachO = orderlist.options[i];
			if (eachO.selected) {
			    remove(i);
			}
	    }
	}

	function allRemove() {
		var orderlist = document.getElementById("orderlist");
	    for (i = orderlist.length - 1; i >= 0; i--) {
			remove(i);
		}
	}

	function up(index) {
		var i = index;
		var orderlist = document.getElementById("orderlist");
		if (i <= 0) return;
		changePosition(i-1,i);
		orderlist.options[i].selected = false;
		orderlist.options[i-1].selected = true;
	}
	function changePosition(i,j){
		var orderlist = document.getElementById("orderlist");
		var optionI = orderlist.options[i];
		var optionJ = orderlist.options[j];
		var text = optionI.text;
		var value = optionI.value;
		optionI.text = optionJ.text;
		optionI.value = optionJ.value;
		optionJ.text = text;
		optionJ.value = value;		
	}
	function down(index) {
		var i = index;
		var orderlist = document.getElementById("orderlist");
		if (i < 0) return;
		if (i >= orderlist.length - 1) return;
		changePosition(index,index+1);
		orderlist.options[index].selected = false;
		orderlist.options[index+1].selected = true;
	}

	function remove(index) {
		var orderlist = document.getElementById("orderlist");
		var i = index;
		if (i == -1) return;
		var oOption = orderlist.options[i];
		orderlist.remove(i);
		// alert(oOption.value);
		eval("var oDiv = document.getElementById(\"" + oOption.value.split(":")[0] + "_div\");");
		oDiv.style.display = "block";
		// alert(oDiv.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[1].checked);
		// alert(oDiv.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[3].checked);
		// alert(oDiv.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[5].checked);
		var inputTd = oDiv.childNodes[0].childNodes[0].childNodes[0].childNodes[1];
		inputTd.childNodes[1].checked = false;
		inputTd.childNodes[3].checked = false;
		inputTd.childNodes[5].checked = true;
	}

	function add(oRadio) {
		var orderlist = document.getElementById("orderlist");
		var oOption = document.createElement("OPTION");
		if (oRadio.value == "desc")
			oOption.text = oRadio.title + "      (降序)";//
		else
			oOption.text = oRadio.title + "      (升序)";//
		oOption.value = oRadio.name + ":" + oRadio.value;
		orderlist.options[orderlist.length] = oOption;
		//orderlist.add(oOption,orderlist.length);
		eval("var oDiv = document.getElementById(\"" + oOption.value.split(":")[0] + "_div\");");
		oDiv.style.display = "none";
	}

	function order() {
		var orderlist = document.getElementById("orderlist");
		var orderKey = new Array();
		var orderSort = new Array();
		for (i = 0;i < orderlist.length;i ++) {
			orderKey[orderKey.length] = orderlist.options[i].value.split(":")[0];
			orderSort[orderSort.length] = orderlist.options[i].value.split(":")[1];
		}
		tableObj.compositeOrder(orderKey, orderSort);
		window.close();
	}

	function displayOne(oDis,oKey) {
		document.write("<div id = \"" + oKey + "_div\" style = \"display:block\">");
		document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">");
		document.write("<tr>");
		document.write("<td width=\"30%\">&nbsp;");
		document.write(oDis);
		document.write(":</td>");
		document.write("<td width=\"70%\">");
		document.write("&nbsp;升序:<input type=\"radio\" name=\"" + oKey + "\" value=\"asc\" title=\"" + oDis + "\" onclick=\"add(this)\">\n");//event.srcElement
		document.write("&nbsp;降序:<input type=\"radio\" name=\"" + oKey + "\" value=\"desc\" title=\"" + oDis + "\" onclick=\"add(this)\">\n");
		document.write("&nbsp;不排序:<input type=\"radio\" name=\"" + oKey + "\" value=\"\">\n");
		document.write("</td>\n");
		document.write("</tr>\n");
		document.write("</table>");
		document.write("</div>\n");
	}

	function displayAll() {
		var d = display;
		var k = key;
		document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">");
		for (i = 0;i < d.length; i ++) {
			document.write("<tr><td>");
			displayOne(d[i], k[i]);
			document.write("</td></tr>");
		}
		document.write("</table>");

	}
//-->
</script>

<center>

<table align="center" width="350" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #0066CC">
  <tr align="center" bgcolor="#0066CC">
    <td height="30" bgcolor="#0066CC"><font color="#FFFFFF">复合排序</font></td>
  </tr>
  <tr align="center" bgcolor="#0066CC"> 
    <td bgcolor="#FFFFFF">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
        
		<tr align="center" bgcolor="#E6E7E8"> 
          <td align="center" colspan="4">
			<select multiple size = "6" style = "width:200" name = "orderlist" id = "orderlist"></select>
		  </td>
        </tr>

        <tr style="border-top:1px solid #0066CC;border-bottom:1px solid #0066CC;" align="center"> 
		  <td height="30" width = "25%"><BUTTON style = "width:60;height:20;border: 1 solid" onclick = "groupUp();">上移</BUTTON></td>
		  <td height="30" width = "25%"><BUTTON style = "width:60;height:20;border: 1 solid" onclick = "groupDown();">下移</BUTTON></td>
		  <td height="30" width = "25%"><BUTTON style = "width:60;height:20;border: 1 solid" onclick = "groupRemove();">删除</BUTTON></td>
		  <td height="30" width = "25%"><BUTTON style = "width:60;height:20;border: 1 solid" onclick = "allRemove();">全部删除</BUTTON></td>
        </tr>
        
		<tr bgcolor="#E6E7E8"> 
          <td colspan="4">
			<script language="JavaScript">
			<!--
				displayAll();
			//-->
			</script>
		  </td>
        </tr>

        <tr> 
          <td height="30" style="border-top:1px solid #0066CC;" colspan="4" align = "center">
		  <BUTTON style = "width:60;height:20;border: 1 solid" onclick = "order();">排序</BUTTON>
		  &nbsp;&nbsp;
		  <BUTTON style = "width:60;height:20;border: 1 solid" onclick = "window.close();">取消</BUTTON>
		  </td>
        </tr>

    </table>
	</td>
  </tr>
</table>

<script language="JavaScript">
<!--
	init();
//-->
</script>

</center>
</BODY>
</HTML>
